<template>
  <el-select v-model="currentValue" :size="size" :mode="mode" clearable class="w-fill" @change="onChange">
    <el-option :value="data[valueName]" :label="data[labelName]" v-for="(data, i) in datas" :key="i">
      {{ data[labelName] }}
    </el-option>
  </el-select>
</template>
<script setup name="FlowSelect">

import {
  reactive,
  ref,
  createApp,
  
  computed,
  onMounted,
  toRefs,
  watch,
  defineExpose,
  getCurrentInstance
} from "vue";
import {useStore} from 'vuex';
/* 组件局部注册 */
const store = useStore();
const emit = defineEmits(['input', 'update:name', 'change'])


const props = defineProps({
  datas: {
    type: Array,
    required: false,
    default: () => [],
  },
  valueName: {
    type: String,
    required: false,
    default: 'value',
  },
  labelName: {
    type: String,
    required: false,
    default: 'name',
  },
  size: {
    type: String,
    required: false,
    default: 'default',
  },
  mode: {
    type: String,
    required: false,
    default: 'default',
  },
  value: {
    type: Array,
    required: false,
    default: () => [],
  },
})

const {node, readable, mode, value, valueName, datas} = toRefs(props)

const currentValue = ref(mode == 'multiple' ? [] : null)


const initData = (value) => {
  if (value && value.length > 0 && mode == 'default') {
    currentValue.value = value[0];
  } else if (value && value.length > 0 && mode == 'multiple') {
    currentValue.value = value;
  } else {
    currentValue.value = mode == 'multiple' ? [] : null;
  }
}
const onChange = (value) => {
  emit('input', mode == 'multiple' ? value : [value]);
  emit(
      'update:name',
      datas.value.filter((data) => (mode == 'multiple' ? value.includes(data[valueName.value]) : data[valueName.value] == value)).map((data) => data[labelName.value]),
  );
  emit('change', value);
}


watch(value, (newValue, oldValue) => {
  initData(newValue);
}, {immediate: true})

computed(() => {
  initData(value);
})

// export default {
//   name: 'FlowSelect',
//   props: {
//     datas: {
//       type: Array,
//       required: false,
//       default: () => [],
//     },
//     valueName: {
//       type: String,
//       required: false,
//       default: 'value',
//     },
//     labelName: {
//       type: String,
//       required: false,
//       default: 'name',
//     },
//     size: {
//       type: String,
//       required: false,
//       default: 'medium',
//     },
//     mode: {
//       type: String,
//       required: false,
//       default: 'default',
//     },
//     value: {
//       type: Array,
//       required: false,
//       default: () => [],
//     },
//   },
//   data() {
//     return {
//       currentValue: this.mode == 'multiple' ? [] : null,
//     };
//   },
//   watch: {
//     value(curVal, oldVal) {
//       this.initData(curVal);
//     },
//   },
//   mounted() {
//     this.initData(this.value);
//   },
//   methods: {
//     initData(value) {
//       if (value && value.length > 0 && this.mode == 'default') {
//         this.currentValue = value[0];
//       } else if (value && value.length > 0 && this.mode == 'multiple') {
//         this.currentValue = value;
//       } else {
//         this.currentValue = this.mode == 'multiple' ? [] : null;
//       }
//     },
//     onChange(value) {
//       this.$emit('input', this.mode == 'multiple' ? value : [value]);
//       this.$emit(
//         'update:name',
//         this.datas.filter((data) => (this.mode == 'multiple' ? value.includes(data[this.valueName]) : data[this.valueName] == value)).map((data) => data[this.labelName]),
//       );
//       this.$emit('change', value);
//     },
//   },
// };
</script>
